<template>
<div class="banner-box">
    <img src="../assets/images/详情_11.png" class="din-top" @click="top">
    <div class="banner">    
        <van-swipe @change="onChange" autoplay loop>
            <van-swipe-item v-for="(img,index) in detail" :key="index" >
            <img :src="detail.goodsImg" />
            </van-swipe-item>
            <template #indicator >
            <div class="custom-indicator">{{ current + 1 }}/9</div>
        </template>
    </van-swipe>
    </div>
    <div class="bottom-box">
        <p><span id="word-b">￥{{detail.goodsLowPrice}}</span><span class="word-a">￥{{detail.goodsHighPrice}}</span></p>
        <p><a>{{detail.goodsName}}
</a></p>
        <p><span id="word-c">已经售卖{{detail.saleNumber}}件</span></p>
    </div>
    <div class="middle-bbox">
        <p class="all">
            <ul class="all-box">
                <li>优惠</li>
                <li>赠品</li>
                <li>满1件赠满1件赠幸运摇摇杯
</li>
                <li>  
                    <span class="iconfont
            icon-tool-xiaojiantou"></span>
                </li>
            </ul>
          
            </p>
        <p class="all">
            <ul class="all-sbox">


                 <van-cell is-link @click="showPopup" ><li class="word-1">选择</li></van-cell>
                 <van-popup v-model="show" round closeable position="bottom" :style="{ height: '50%' }">
                     <div class="info"></div>
                     <div class="father">
                         <ul class="box-ul">
                         <li class="fix">
                              <img :src="detail.goodsImg" />
                             
                         </li>
                         <li class="fix2">
                             <p class="fix7">￥{{detail.goodsLowPrice}}</p>
                             <p class="mag"> 已选：默认规格</p>
                         </li>
                     </ul>
                     </div>
                     <div class="bt-box">
                         <ul class="size">
                             <li>默认规格</li>
                             <li id="guige">默认规格</li>
                         </ul>

                    <div class="box-p">
                        <div class="cart">
                        数量
                     </div>

                     <div class="cartt">
                         <ul>
                             <li id="fix3" @click="jian">-</li>
                             <span id="fix6">{{num}}</span>
                             <li id="fix5" @click="jia">+</li>
                         </ul>
                     </div>
                    </div>

                        

                     </div>

                     <div class="last">
                            <p id="last-big11" @click="goto">
                                立即购买
                            </p>
                                
                        </div>

               </van-popup>

            </ul>
        </p>
        <p class="all"> 
            <ul class="all-sbox">
                <div class="box-bao">
                     <li>运费</li>
                    <li>免运费</li>
                </div>
               
                
            </ul>
            </p>
    </div>
        <div class="nav-p">
            <img src="../assets/images/详情_03.png">
        </div>
    
        <div class="b-box">
            <div class="pinglun">
                <div class="ping">
                    <p>评价(10)</p>
                    <p @click="go">查看全部 &nbsp;&nbsp;&gt;</p>
         </div>
                <div class="c-ping" v-for="speaking in speaklist" :key="speaking.id">
                    <p id="d-img">
                        <img src="../assets/images/详情_07.png">
                        <span>{{speaking.userName}}</span>
                        
                    </p>
                    <span class="speak" align="left">
                       {{speaking.comment}}
                        <br><br>
                        <span class="speak99">  
                        评价时间：{{speaking.createTime}}
                        </span>
                    </span>
                   
                </div>
            </div>
        </div>

        <ul class="footer-box">
            <li id="tubiao">
                <p id="p1">
                     <span class="iconfont icon-qicheqianlian-1-copy"></span>
                </p>
               <p id="p2">
                   购物车
               </p>

 
                
            </li>
            <li><p class="boder" style="height:0.35rem;" >加入购物车</p></li>
            <li><p class="color">立即购买</p></li>
        </ul>

     

</div>
</template>

<script>
import $ from "jquery";
import axios from "axios";
export default {
    name:"Banner",
     data() {
    return {
      show: false,
      current: 0,
      touchable:true,
      imgs:[],
      detail:{},
       num :0
    
    }
   
  },

 methods: {
    showPopup() {
      this.show = true;
    },
    onChange(index) {
      this.current = index;
    },
    jian(){
        this.num--
        if(this.num==0){
            this.num=1
        }
    },
    jia(){
         this.num++
    },
    top(){
         $(function(){
            $(".din-top").click(function() {
            $("html,body").animate({scrollTop:0}, 500);
            }); 
            })
    },
    go(){
        this.$router.push('/PingLun');
    },
    goto(){
        this.$router.push('/Shopping');
    }
    
  },

created(){
   axios({
     url:"/api/goods/findGoodsByGid",
     params:{
         id:this.$route.params.goodid
     }
    
   })
  .then(res=>{
        // console.log(res,res.data.data,'res.data[0]');
       this.detail=res.data.data
       
       }),
       axios({
     url:"/api/goods/findGoodsByGid",
     params:{
         id:this.$route.params.goodid
     }
    
   })
  .then(res=>{
        // console.log(res,res.data.data,'res.data[0]');
       this.detail=res.data.data
       
       }),
    axios({
        url:"/api/comment/findCommentsByGid?gid=14",
        })
        .then(res=>{
        console.log(res.data,'res.data1111111');
        this.speaklist = res.data.data;
        })

     }
};


</script>


<style scoped>
@import url(../assets/rest.css);
@import url(../assets/font_2733385_ho3e091pt0p/iconfont.css);
.custom-indicator{
    color: white;
}
.banner img{
    width: 3.8rem;
    height: 2.9rem;
}
.close-icon{
    color: #6d87c4;
}
.banner-box{
    width: 100%;
    height: 3.95rem;
    /* background-color:yellow; */
}
.banner{
    width: 100%;
    height: 2.9rem;
    background-color:plum;
    margin-top: 0.4rem;
}

.bottom-box{
    width: 3.55rem;
    height: 1.05rem;
    background-color: white;
    margin: auto;
    border-radius: 0.05rem;
}
.bottom-box p{
    width: 100%;
    height: 0.34rem;
    background-color: white;
    line-height: 0.34rem;

}
 .icon-tool-xiaojiantou{
     font-size: 0.3rem;
     font-weight: bold;
 }
.bottom-box p a{
    float: left;
    text-indent: 0.1rem;
    color: black;
}
.bottom-box p span{
    float: left;
    text-indent: 0.1rem;
    /* color: black; */
}
.word-a,#word-c{
  text-decoration:line-through;
  color:gray;
  font-size:0.12rem  
}
#word-b{
    color:#d85700;
    font-weight: bold;
}
.middle-bbox{
    width: 100%;
    height: 1.45rem;
    background-color:white;
  
   
}
.middle-bbox p{
    width: 3.53rem;
    height: 0.4rem;
    border-radius: 0.05rem;
    background-color: white;
    margin: auto;
    margin-top: 0.1rem;
     position: relative;
}
.all-box{
    width: 100%;
    height: 100%;
    background-color:white ;
    display: flex;
    justify-content: space-evenly;
    line-height: 0.4rem;
}
.all-box li:nth-child(2){
    width: 0.3rem;
    height: 0.2rem;
    background-color: #eb7242;
    font-size: 0.12rem;
    color: white;
    line-height: 0.2rem;
    text-align: center;
    margin-top: 0.1rem;
}
.word-1{
    font-size: 0.16rem;
    color: black;
}
.xuan{
    color: gray;
}
.all-sbox{
    width: 3.5rem;
    height: 0.4rem;
    /* background-color:blue ; */
    display: flex;
    justify-content: space-around;
    line-height: 0.4rem;
   
}
.all-sbox li:nth-child(3){
    margin-left: 0.1rem;
    position: absolute;
    right: 0;
    top: 0.03rem;
}
.all-sbox li{
    margin-right:0.1rem ;
}
.nav-p{
    width: 100%;
    height: 0.5rem;
    
   
}
.nav-p img{
    margin: auto;
    line-height: 0.6rem;
    margin-top: 0.1rem;
}
.b-box{
    width: 100%;
    height: 2.27rem;
  
    margin-bottom: 0.6rem;
  
}
.ping p:nth-child(2){
    color: #6d87c4;
}
.pinglun{
    width: 3.53rem;
    height: 2.1rem;
    background-color: white;
    margin: auto;
}
.pinglun .ping{
    display: flex;
    justify-content: space-between;
}
.c-ping{
    width: 100%;
    height: 1rem;
   background-color: white;
}
#d-img{
    width: 100%;
    height: 0.32rem;
    background-color:white;
    margin-top: 0.1rem;
    display: flex;
    line-height: 0.32rem;
    margin-bottom: 0.1rem;
}
.speak{
    width: 100%;
    /* height: 1rem; */
    display: inline-block;
    background-color: white;
    text-indent: 0.2rem;
    text-indent: 0.2rem;
    /* margin-top: 0.1rem; */
}
.din-top{
    position: fixed;
    top: 5rem;
    z-index: 10;
    right: 0.1rem;
}
.footer-box{
    width: 100%;
    height: 0.6rem;
    background-color: white;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
}
.footer-box li{
   
    line-height: 0.6rem;
}
.footer-box p{
    width:1.4rem;
    height: 0.4rem;
    border-radius: 0.1rem;
    line-height: 0.4rem;
    margin-top:0.1rem ;
}
.boder{
    border: 0.02rem solid #6d87c4;
    line-height: 0.4rem;
    height: 0.3rem;
    color:#6d87c4 ;
    text-align: center;
}
.color{
    background-color:#6d87c4 ;
    color: white;
    text-align: center;
}
#tubiao{
   
    height: 0.55rem;
 
}
#p1{
    width: 0.1rem;
    height: 0.2rem;
    margin-top: -0.08rem;
    text-align: center;
    line-height: 0.6rem;
    margin-left: 0.1rem;
}
#p1 span{
    font-size: 0.3rem;
   
    
}
#p2{
    width: 0.5rem;
    height: 0.2rem;
    margin-left: 0.1rem;
    font-size: 0.1rem;
    margin-top: 0.15rem;
}
.box-bao{
   display: flex;
   margin-left: -2.2rem;
}
.father{
    width: 100%;
    height: 1.1rem;
    /* background-color:red ; */
}
.father .fix{
    width: 1.5rem;
 
    /* background-color:palevioletred ; */
} 
.box-ul{
    width: 2rem;

    /* background-color: #d85700; */
    display: flex;
}
.fix2{
    width: 1.05rem;
    /* background-color: #6d87c4; */
}
.fix2 p{
    width: 165%;
    height: 0.34;
    font-size: 0.16rem;
}
.info{
    width: 100%;
    height: 0.2rem;
    /* background-color:purple ; */
}
.bt-box{
    width: 100%;
    height: 1.45rem;
    /* background-color:yellow ; */
    overflow: hidden;
}
.size{
    width: 1.7rem;
    height: 0.3rem;

    margin-top:0.2rem ;
    display: flex;
    line-height: 0.3rem;
    margin-left: 0.2rem;
}
#guige{
    width: 0.8rem;
    height: 0.25rem;
    color: #6d87c4;
    border: 0.01rem solid black;
    border-radius: 0.5rem;
    text-align: center;
    line-height: 0.25rem;
}
.cart{
    width: 0.37rem;
    height: 0.2rem;
    /* background-color: #6d87c4; */
    margin-left: 0.2rem;
}
.cartt{
    width: 0.7rem;
    height: 0.24rem;
    /* background-color:#d85700; */
    float: right;
    margin-right: 0.2rem;
}
.cartt ul{
    width: 100%;
    height: 100%;
    /* background-color: aqua; */
    display: flex;
   
}
#fix3{
    width: 0.2rem;
    height: 0.22rem;
    border: 0.01rem solid #6d87c4;
    line-height:0.22rem ;
    border-radius: 50%;
    text-align: center;
}
#fix5{
    width: 0.2rem;
    height: 0.22rem;
    background-color: #6d87c4;
     line-height:0.22rem ;
     margin-top: 2rem;
     margin-right: 0.2rem;
     border-radius: 50%;
    text-align: center;
}
#fix6{
    line-height: 0.24rem;
}
.last{
   height: 0.4rem;
}
#last-big11{
    width: 3rem;
    height: 0.4rem;
    background-color: #6d87c4;
    margin:auto ;
    border-radius: 0.5rem;
    color: white;
    text-align: center;
}
.fix7{
    color: #eb7242;
    
}

 .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
  .fix img{
      width: 100%;
      height: 100%;
  }
  .fix{
      margin-left: 0.1rem;
  }
.speak99{
      margin-left:1.7rem ;
      font-size: 0.12rem;
  } 
 
</style>